<template>
    <!-- 拒绝原因 -->
    <view class="out-box">
        <view class="refuse-title">
            <input type="text" value="" placeholder="请简单描述问题" placeholder-style="color: #969da7; font-size: 30rpx" />
        </view>
        <view class="refuse-title picker-box">
            <picker @change="bindPickerChange" :value="index" :range="array">
                <view class="uni-input">{{array[index]}}</view>
            </picker>
            <!-- <input type="text" value="" placeholder="请简单描述问题" placeholder-style="color: #969da7; font-size: 30rpx" /> -->
        </view>
        <view class="refuse-title">
            <textarea value="" placeholder="详细说明" placeholder-style="color: #969da7; font-size: 30rpx" />
        </view>
        <view class="btns-box">
            <view class="btns" @click="showModal('提交反馈')">提交反馈</view>
        </view>
        
    </view>
</template>

<script>
export default {
    props:{},
    components: {
    },
    data() {
        return {
            imgs: [
                '../../static/defautl/ban.png',
                '../../static/defautl/banner.png',
                '../../static/defautl/banner01.png',
            ],
            title: 'picker',
            array: ['理由1', '理由1', '理由1', '理由1'],
            index: '0',
            time: '12:01'
        }
    },
    onLoad(p) {},
    watch:{},
    methods: {
        bindPickerChange: function(e) {
            console.log('picker发送选择改变，携带值为', e.target.value)
            this.index = e.target.value
        },
        stateStr(i) {
            switch(i) {
                case 1: return '提交申请'; break
                case 2: return '等待高级经理审核'; break
                case 3: return '高级经理通过审核'; break
                case 4: return '等待最终审核人审核'; break
                case 5:  
                    let str
                    switch(Number(this.p.state)) {
                        case 0: str = '等待最终审核人审核'; break
                        case 1: str = '审核通过'; break
                        case 2: str = '审核拒绝'; break
                    }
                    return str
                break
            }
        },
        // 去详情
        goToViewFun(item) {
            
        },
        previewImage(item){
            uni.previewImage({
            	current: 0,
            	urls: this.imgs
            })
        },
        showModal(str){
            uni.showModal({
                title: `确认${str}`,
                success: (res) => {
                    if (res.confirm) {
                        console.log(1)
                    }
                }
            });
        }
    },
    mounted() {
        
    }
}
</script>

<style>

</style>
<style scoped lang="scss">
.out-box{
    padding: 30rpx 30rpx 100rpx 30rpx;
}

.refuse-title{
    margin-bottom: 30rpx;
    box-shadow: 0px 2rpx 10rpx 0px rgba(0,0,0,0.1);
    
    &.picker-box{
        height: 90rpx;
        background: #fff;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        
        uni-picker{
            width: 100%;
            height: 100%;
            line-height: 90rpx;
        }
    }
    
    input {
        height: 90rpx;
        background: #fff;
        border-radius: 20rpx;
        padding: 0 30rpx;
    }
    
    textarea {
        background: #fff;
        border-radius: 20rpx;
        padding: 30rpx;
        width: 100%;
    }
}

.btns-box{
    display: flex;
    margin-top: 30rpx;
    
    .btns{
        flex: 1;
        height: 92rpx;
        line-height: 92rpx;
        text-align: center;
        border: 1rpx solid #1f4188;
        border-radius: 10rpx;
        color: #fff;
        background: #1f4188;
        font-size: 34rpx;
        
        &:active{
            background: #fff;
            color: #1f4188;
        }
    }
}
</style>
